<template>
        <div id="jnz" class="container-fluid padding">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>技能组列表</legend>
            </fieldset>
            <table class="layui-hide" id="jnzToolbarList"  lay-filter="jnzToolbarList"></table>
            <script type="text/html" id="jnzToolbar">
              <div class="layui-btn-container">
                <button class="el-button el-button--primary is-round el-button--mini" lay-event="add">新增技能组</button>
                <button class="el-button el-button--success is-round el-button--mini" lay-event="refresh">刷新列表</button>
              </div>
            </script>
            <script type="text/html" id="editBar">
              <button class="el-button el-button--primary is-round el-button--mini" lay-event="edit">编辑</button>
              <button class="el-button el-button--danger is-round el-button--mini" lay-event="del">删除</button>
            </script>
            <div id="edit" style="display: none">
                <v-add :saveDatas="saveDatas"></v-add>
            </div>
        </div>
</template>

<script>
    import add from "./add"
    export default {
        name: "jnz",
        components:{
            "v-add":add
        },
        data() {
            var that = this;
            return {
                myCdr:"",//我的话单
                watchAll:true,
                saveDatas:{
                    name:'',
                    en:'',
                    level:0,
                    in_out:'',
                    timezone1:'',
                    timezone2:'',
                    skill_level:'',
                    remark:'',
                },
                levelOption: [
                    {text: '不可用', value: '1', temp: ""},
                    {text: '内线', value: '2', temp: ""},
                    {text: '市话', value: '3', temp: ""},
                    {text: '国内长途', value: '4', temp: ""},
                    {text: '国际长途', value: '5', temp: ""},
                ],
                fpfsOption: [
                    {text: '选择所有坐席，即让所有坐席振铃，那个先接就选择哪个。', value: 'ring-all', temp: ""},
                    {text: '选择空闲时间最长的坐席', value: 'long-idel-agent', temp: ""},
                    {text: '轮询', value: 'round-robin', temp: ""},
                    {text: '按固定的顺序选择', value: 'top-down', temp: ""},
                    {text: '总是选择通话时间最短的坐席', value: 'agent-with-least-talk-time', temp: ""},
                    {text: '总是选择接电话次数最少的坐席', value: 'agent-with-fewest-calls', temp: ""},
                    {text: '根据梯队和顺序选择', value: 'sequentially-by-agent-order', temp: ""},
                    {text: '随机选择', value: 'random', temp: ""},
                ],
                in_outOption: [
                    {text: '可接听', value: '0', temp: ""},
                    {text: '可接听、可打出', value: '1', temp: ""},
                ],
                skill_levelOption: [
                    {text: '第1级', value: '1', temp: ""},
                    {text: '第2级', value: '2', temp: ""},
                    {text: '第3级', value: '3', temp: ""},
                    {text: '第4级', value: '4', temp: ""},
                    {text: '第5级', value: '5', temp: ""},
                    {text: '第6级', value: '6', temp: ""},
                    {text: '第7级', value: '7', temp: ""},
                    {text: '第8级', value: '8', temp: ""},
                    {text: '第9级', value: '9', temp: ""},
                    {text: '第10级', value: '10', temp: ""},
                ],
                table_head:[
                    {field: 'id',  title: '序列号', sort: true,width:120}
                    ,{field: 'name',  title: '技能组的名称', sort: true,width:240}
                    ,{field: 'en',  title: '拼音简码', sort: true,width:120}
                    ,{field: 'level',  title: '话务级别',width:240, templet:function (obj){if(obj.level!=undefined){
                        var res=(that.levelOption).filter(function(option){return obj.level==option.value;});
                        return res[0].text}else{return '';}}
                        ,sort: true}
                    ,{field: 'fpfs',  title: '分配方式',width:240, templet:function (obj){if(obj.fpfs!=undefined){
                        var res=(that.fpfsOption).filter(function(option){return obj.fpfs==option.value;});
                        return res[0].text}else{return '';}}
                        ,sort: true}
                    ,{field: 'in_out',  title: '电话权限',width:240, templet:function (obj){if(obj.in_out!=undefined){
                        var res=(that.in_outOption).filter(function(option){return obj.in_out==option.value;});
                        return res[0].text}else{return '';}}
                        ,sort: true}
                    ,{field: 'timezone1',  title: '时间段起始',width:120, sort: true}
                    ,{field: 'timezone2',  title: '时间段结束',width:120, sort: true}
                    ,{field: 'skill_level',  title: '技能等级',width:240,templet:function (obj){if(obj.skill_level!=undefined){
                        var res=(that.skill_levelOption).filter(function(option){return obj.skill_level==option.value;});
                        return res[0].text}else{return '';}}
                        , sort: true}
                    ,{field: 'remark',  title: '备注',width:120, sort: true}
                    , {fixed: 'right',
                        width: 165,
                        align:'center',
                        templet: '#editBar',
                    }
                ],
            }
        },
        beforeCreate: function(){
            this.$nextTick(function () {
                layui.use('table');
            })
        },
        created:function(){
            this.$nextTick(function () {
                layui.use('table',() => {//加这个是防止刷新的时候会出现不存在render方法
                    // 再次加载出表格数据（之前已经加载出来了dom数据）
                    this.$message_.layTable(this,'cti-manager-jnz/list','#jnzToolbarList',{},this.table_head,500,'#jnzToolbar',true)
                    //头工具栏事件
                    layui.table.on('toolbar(jnzToolbarList)', (obj)=>{
                        if (obj.event=="add") {
                            this.saveDatas={};
                            allIndex = this.$message_.layOpen("#edit",()=>{})
                        }
                        if (obj.event=="refresh") {
                            noCheckCache = true;
                            this.$message_.layTable(this,'cti-manager-jnz/list','#jnzToolbarList',{},this.table_head,500,'#jnzToolbar',true)
                        }
                    });
                    //监听行工具事件
                    layui.table.on('tool(jnzToolbarList)', (obj)=>{
                        allId = obj.data.id;
                        if(obj.event === 'del'){
                            layer.confirm('确认删除该行吗？', (i)=>{
                                layer.close(index);
                                this.$message_.postTips(this,"删除",'cti-manager-jnz/delete?id='+allId,{},null,()=>{
                                    obj.del();
                                    layer.close(i);
                                })
                            });
                        } else if(obj.event === 'edit'){
                            this.saveDatas = obj.data
                            allIndex = this.$message_.layOpen("#edit",()=>{
                                if (allSuccess=='success'){
                                    obj.update(obj.data)
                                    allSuccess='faild'
                                }
                            })
                        }
                    });
                });
            });
        },
    }
</script>